<template>
  <div>
    <!-- 头部区域 -->
    <el-header>
      <p>万事达-TMS客户端</p>
      <div>
        <span class="iconfont icon-svg45-copy">⑧</span>
        <el-button type="info">退出系统</el-button>
      </div>
    </el-header>

    <!-- 标题区域 -->
    <el-row class="title">
      <el-col :span="24">
        <div>运输执行-提货单</div>
      </el-col>
    </el-row>

    <!-- 搜索区域 -->
    <el-row :gutter="20" class="search">
      <!-- 人员筛选 -->
      <el-col :span="6">
        <div class="personnel_sel">
          <el-row :gutter="5">
            <!-- 下拉选择框 -->
            <el-col :span="10">
              <el-select v-model="value_per">
                <el-option v-for="item in options_per" :key="item.value_per" :label="item.label_per" :value="item.value_per">
                </el-option>
              </el-select>
            </el-col>

            <!-- 输入框 -->
            <el-col :span="14">
              <el-input v-model="input_per" clearable> </el-input>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 日期筛选 -->
      <el-col :span="7">
        <div class="date_select">
          <el-row :gutter="5">
            <!-- 下拉选择框 -->
            <el-col :span="6">
              <el-select v-model="value_date">
                <el-option v-for="item in options_date" :key="item.value_date" :label="item.label_date" :value="item.value_date">
                </el-option>
              </el-select>
            </el-col>

            <!-- 日期选择框 -->
            <el-col :span="10">
              <el-date-picker v-model="date_sel" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                style="width: 180%">
              </el-date-picker>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 搜索按钮 -->
      <el-col :span="2">
        <el-button type="success">搜索</el-button>
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-tabs v-model="activeName" type="card">
      <!-- 跳转按钮 -->
      <el-row :gutter="5">
        <el-col :span="24" class="checkOrder">
          <!-- 查看 -->
          <el-button @click="handleUploadDelivery" type="primary">上传提货单</el-button>
          <!-- 异常上报 -->
          <el-button @click="handleAbnormity" type="primary">异常上报</el-button>
          <!-- 打印 -->
          <el-button @click="handlePrint" type="primary">打印</el-button>
        </el-col>
      </el-row>
      <el-tab-pane label="全部（10）" name="first">
        <el-table :data="table_Data" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
          <el-table-column prop="sel" label="选择" type="selection"></el-table-column>
          <el-table-column prop="order_num" label="订单号" align="center"></el-table-column>
          <el-table-column prop="order_time" label="下单日期" width="110px" align="center"></el-table-column>
          <el-table-column prop="waybill_num" label="运单号" align="center"></el-table-column>
          <el-table-column prop="client_firm" label="委托方" align="center"></el-table-column>
          <el-table-column prop="client_phone" label="委托人电话" align="center"></el-table-column>
          <el-table-column prop="origin" label="始发地" align="center"></el-table-column>
          <el-table-column prop="destination" label="目的地" align="center"></el-table-column>
          <el-table-column prop="car_num" label="车牌号" align="center"></el-table-column>
          <el-table-column prop="processing_time" label="处理时间" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待提货（8）" name="second">
        <el-table :data="table_Data" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
          <el-table-column prop="sel" label="选择" type="selection"></el-table-column>
          <el-table-column prop="order_num" label="订单号" align="center"></el-table-column>
          <el-table-column prop="order_time" label="下单日期" width="110px" align="center"></el-table-column>
          <el-table-column prop="waybill_num" label="运单号" align="center"></el-table-column>
          <el-table-column prop="client_firm" label="委托方" align="center"></el-table-column>
          <el-table-column prop="client_phone" label="委托人电话" align="center"></el-table-column>
          <el-table-column prop="origin" label="始发地" align="center"></el-table-column>
          <el-table-column prop="destination" label="目的地" align="center"></el-table-column>
          <el-table-column prop="car_num" label="车牌号" align="center"></el-table-column>
          <el-table-column prop="processing_time" label="处理时间" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已提货（2）" name="third">
        <el-table :data="table_Data" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
          <el-table-column prop="sel" label="选择" type="selection"></el-table-column>
          <el-table-column prop="order_num" label="订单号" align="center"></el-table-column>
          <el-table-column prop="order_time" label="下单日期" width="110px" align="center"></el-table-column>
          <el-table-column prop="waybill_num" label="运单号" align="center"></el-table-column>
          <el-table-column prop="client_firm" label="委托方" align="center"></el-table-column>
          <el-table-column prop="client_phone" label="委托人电话" align="center"></el-table-column>
          <el-table-column prop="origin" label="始发地" align="center"></el-table-column>
          <el-table-column prop="destination" label="目的地" align="center"></el-table-column>
          <el-table-column prop="car_num" label="车牌号" align="center"></el-table-column>
          <el-table-column prop="processing_time" label="处理时间" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum" :page-sizes="[1, 5, 10, 20]"
      :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      // 人员选项
      options_per: [
        {
          value_per: "选项1",
          label_per: "订单号",
        },
      ],
      // 默认展示人员选项
      value_per: "运单号",
      // 人员输入框
      input_per: "",
      // 时间选项
      options_date: [
        {
          value_date: "选项1",
          label_date: "下单时间",
        },
        {
          value_date: "选项2",
          label_date: "收货有效期",
        },
      ],
      // 默认展示时间类型
      value_date: "下单时间",
      // 日期选择器
      date_sel: "",
      // 表格数据
      table_Data: [
        {
          sel: "", // 选择
          order_num: "XL0000001-a", // 订单号
          order_time: "2017/09/10 09:12:59", // 下单日期
          waybill_num: "XL0000001-a", // 运单号
          client_firm: "深圳星联国际", // 委托方
          client_phone: "18966666666", // 委托人电话
          origin: "深圳", // 始发地
          destination: "上海", // 目的地
          car_num: "粤B59654", // 车牌
          processing_time: "2017/09/10 09:12:59", // 处理时间
          status: "已处理", // 状态
        },
        {
          sel: "", // 选择
          order_num: "", // 订单号
          order_time: "", // 下单日期
          waybill_num: "", // 运单号
          client_firm: "", // 委托方
          client_phone: "", // 委托人电话
          origin: "", // 始发地
          destination: "", // 目的地
          car_num: "", // 车牌
          processing_time: "", // 处理时间
          status: "待处理", // 状态
        },
      ],
      // tabs标签
      activeName: "first",
      pagenum: 1, // 当前页码值
      pagesize: 20, // 默认每页显示几条数据
      total: 200, // 总数据条数
    };
  },

  methods: {
    // 点击按钮跳转 上传提货单
    handleUploadDelivery() {
      this.$router.push("/transport/delivery");
    },
    // 点击按钮跳转 异常上报
    handleAbnormity() {
      this.$router.push("/transport/abnormity");
    },

    // 监听 每页显示条数 改变的事件
    handleSizeChange(newSize) {
      console.log(`每页 ${newSize} 条`);
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.el-header {
  background-color: #99a9bf;
  color: #333;
  font-size: 24px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  div {
    span {
      margin: 30px;
      font-size: 28px;
    }
  }
}

.title {
  height: 30px;
  background-color: #d3dce6;
  line-height: 30px;
  margin-bottom: 5px;
  div {
    text-align: left;
    margin-left: 5px;
  }
}

.search {
  margin-bottom: 5px;
  el-button {
    height: 10px;
  }
}
.but_group {
  // margin-left: -1150px;
  margin-bottom: 5px;
  text-align-last: left;
}

.checkOrder {
  margin-bottom: 5px;
  text-align-last: left;
}

/deep/.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  background-color: #b3c0d1;
  border-radius: 3px;
  // border: 1px solid #b3c0d1;
}

/deep/.el-tabs__item:hover {
  cursor: pointer;
  background-color: #c8cfd8bb;
  color: black;
}
/deep/.el-tabs__item.is-active {
  color: black;
  background-color: #c8cfd8bb;
}
</style>